<template>
  <div class="wrapper">
    <!-- 1.分类页导航栏 -->
    <nav-bar class="home-nav">
      <template slot="center">商品分类</template>
    </nav-bar>
    <!-- 2.分类页可滚动区域 -->
    <scroll
      class="content-left"
      ref="scroll"
      :probe-type="3"
      :pullUpLoad="true"
    >
      <!-- 2.1分类页左边切换栏菜单 -->
      <div class="left-scroll">
        <catetabbar
          class="tab-bar"
          :categories="categories"
          @selectItem="selectItem"
          ref="tabbar"
        />
      </div>
    </scroll>
    <scroll
      class="content-right"
      ref="scroll"
      :probe-type="3"
      :pullUpLoad="true"
    >
      <!-- 2.2分类页右侧商品详情 -->
      <div class="right-scroll">
        <cate-goods class="goods-list" :subcategories="showSubcategory" />
      </div>
      <tab-control @tabclick="tabClick" :titles="['综合', '新品', '销量']" />
      <cate-more-goods :goods="showCategoryDetail" />
    </scroll>
  </div>
</template>

<script>
import {
  getCategory,
  getSubcategory,
  getCategoryDetail,
} from "network/category";
import NavBar from "../../components/common/navbar/NavBar.vue";
import Scroll from "components/common/scroll/Scroll";
import Catetabbar from "./childComps/catetabbar.vue";
import CateGoods from "../../components/content/categoods/CateGoods.vue";
import CateMoreGoods from "./childComps/CateMoreGoods.vue";
import TabControl from "../../components/content/tabcontrol/TabControl.vue";
import { tabControlMixin } from "@/common/mixin";

export default {
  name: "Category",
  components: {
    NavBar,
    Catetabbar,
    Scroll,
    CateGoods,
    CateMoreGoods,
    TabControl,
  },
  //混入tab-control的属性和方法
  mixins: [tabControlMixin],
  data() {
    return {
      scroll: null,
      position: null,
      currentIndex: -1,
      categoryData: [],
      categories: [],
    };
  },
  created() {
    // 1.请求分类数据
    this._getCategory();
  },
  mounted() {
    this.$refs.scroll.scroll.on("scroll", (position) => {
      this.position = position;
    });
    this.$refs.scroll.scroll.on("pullingUp", () => {
      console.log("上拉加载更多");
    });
  },
  activated() {
    console.log("activated");
    this.$refs.scroll.scrollTo(0, 0, 0);
    this.$refs.scroll.refresh();
  },
  computed: {
    showSubcategory() {
      if (this.currentIndex === -1) return [];
      return this.categoryData[this.currentIndex].subcategories;
    },
    showCategoryDetail() {
      if (this.currentIndex === -1) return [];
      return this.categoryData[this.currentIndex].categoryDetail[
        this.currentType
      ];
    },
  },
  methods: {
    //1. 网络请求
    _getCategory() {
      getCategory().then((res) => {
        // 1.获取分类数据
        console.log(res);
        this.categories = res.data.data.category.list;
        // 2.初始化每个类别的子数据
        for (let i in this.categories) {
          this.categoryData[i] = {
            subcategories: [],
            categoryDetail: {
              pop: [],
              new: [],
              sell: [],
            },
          };
        }
        // 3.请求第一个分类数据
        this._getSubcategories(0);
      });
    },
    _getSubcategories(index) {
      this.currentIndex = index;
      const _maitKey = this.categories[index].maitKey;
      getSubcategory(_maitKey).then((res) => {
        console.log(res);
        this.categoryData[index].subcategories = res.data.data.list;
        console.log(this.categoryData[index].subcategories);
        this.categoryData = { ...this.categoryData };
        this._getCategoryDetail("pop");
        this._getCategoryDetail("sell");
        this._getCategoryDetail("new");
      });
    },
    _getCategoryDetail(type) {
      // 1.获取请求的miniWallkey
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      // 2.发送请求,传入miniWallkey和type
      getCategoryDetail(miniWallkey, type).then((res) => {
        // 3.将获取的数据保存下来
        console.log({ 这是详细数据: res });
        this.categoryData[this.currentIndex].categoryDetail[type] = res.data;
        this.categoryData = { ...this.categoryData };
      });
    },
    // 2.事件响应相关方法(点击侧边栏切换按钮传参index)
    selectItem(index) {
      this._getSubcategories(index);
    },
  },
};
</script>

<style scoped>
.wrapper {
  height: 100vh;
  width: 100vw;
}
.content-left,
.content-right {
  height: calc(100% - 44px - 49px);
  overflow: hidden;
}
.content-left {
  width: 90px;
  float: left;
}
.content-right {
  width: calc(100% - 90px);
  float: right;
}
.goods-list {
  width: 100%;
}
.left-scroll,
.right-scroll {
  overflow: hidden;
}

.home-nav {
  background-color: var(--color-tint);
  color: #fff;
}
</style>